<style>
  .picImg {
    width: 40px;
    height: 40px;
  }
</style>
<template>
  <div class="app-container">
    <!--&lt;!&ndash; 查询和其他操作 &ndash;&gt;-->

    <div class="filter-container" style="display: flex">
      <el-form ref="editForm" :model="editForm" status-icon label-position="right"
               label-width="100px" style="display: flex">
        <el-form-item label="保理公司" prop="ID" style="width: 400px">
          <el-select v-model="editForm.ID" placeholder="请选择" style="width: 260px">
            <el-option
              v-for="item in bxagentfee"
              :key="item.companyName"
              :label="item.companyName"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起始日期" prop="startDate">
          <el-date-picker
            v-model="editForm.startTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="endDate">
          <el-date-picker
            v-model="editForm.endTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div style="margin-left: 30px">
        <el-button type="primary" @click="doQuery" icon="el-icon-search">查询</el-button>
      </div>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
              :header-cell-style="{background:'#92D3FF',color:'#fff'}">

      <el-table-column align="center" min-width="100" label="表单类型" prop="type">
        <template slot-scope="scope">
          <el-tag>{{{"0":"代理人手续费","1":"权益服务费",}[scope.row.type]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="100" label="表单编号" prop="formNo"/>
      <el-table-column align="center" min-width="100" label="保险公司名称" prop="suranceName"/>
      <el-table-column align="center" min-width="100" label="保代公司名称" prop="agentName"/>
      <el-table-column align="center" min-width="100" label="保理公司名称" prop="factoringName"/>
      <el-table-column align="center" min-width="100" label="上传时间" prop="addTime"/>
      <el-table-column align="center" min-width="100" label="表单状态" prop="status">
        <template slot-scope="scope">
          <el-tag>{{{
              "0":"表单已上传",
              "1":"权益服务商垫资已申请",
              "2":"保理公司已接收",
              "3":"保理公司垫资已支付",
              "4":"保险公司已回款",
              "5":"保代公司已确认",
              "6":"垫资利息已支付",
              "7":"权益服务商已取款"}[scope.row.status]}}
          </el-tag>
        </template>
      </el-table-column>
      <!--<el-table-column align="center" min-width="100" label="保代公司/权益服务商处理时间" prop="advanceTime"/>-->
      <el-table-column align="center" min-width="120" label="需要垫资保单数" prop="advanceCount"/>
      <el-table-column align="center" min-width="100" label="需要垫资金额" prop="advanceAmount"/>
      <el-table-column align="center" min-width="100" label="垫资支付时间" prop="advancePayTime"/>
      <el-table-column align="center" min-width="100" label="回款总额" prop="repayAmount"/>
      <el-table-column align="center" min-width="100" label="回款时间" prop="repayTime"/>
      <el-table-column align="center" min-width="100" label="垫资利息" prop="interest"/>
      <el-table-column align="center" min-width="100" label="利息付款时间" prop="interestTime"/>
      <!--<el-table-column fixed="right" align="center" label="操作" width="200" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="success" size="mini"
                     @click="handleBalance(scope.row)">明细查询
          </el-button>
        </template>
      </el-table-column>-->
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
                @pagination="getList"/>
    <!-- 余额对话框 -->
    <!--明细对话框-->
  </div>
</template>

<script>
    import {doGet, doPost} from '@/api'
    import {cities} from '@/utils/base'
    import {parseTime} from '@/utils'
    import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
    import checkPermission from '@/utils/permission' // 权限判断函数

    export default {
        name: 'correlation',
        components: {Pagination},
        filters: { },
        data() {
            return {
                list: [],
                bxagentfee: [],
                total: 0,
                listLoading: true,
                listQuery: {
                    pageNum: 1,
                    pageSize: 20,
                    ID: undefined
                },
                editForm: {
                    startTime: undefined,
                    endTime: undefined,
                    factoringID: undefined
                },
                id: undefined,
                account: undefined, // 指定账户号
            }
        },
        created() {
            this.getList()
            this.getBxagentfee()
        },
        methods: {
            checkPermission,
            getBxagentfee() {
                doGet('factoring.html?op=list', {}).then(response => {
                    this.bxagentfee = response.rows
                }).catch(() => {
                    this.bxagentfee = []
                })
            },
            // 获取回款列表
            getList() {
                this.listLoading = true
                doGet('statistics.html?op=getAllBlList', this.editForm).then(response => {
                    this.list = response.rows
                    this.total = response.rows.length
                    this.listLoading = false
                }).catch(() => {
                    this.list = []
                    this.total = 0
                    this.listLoading = false
                })
            },
            // 查询余额
            doQuery() {
                this.getList()
            },
        }
    }
</script>
